import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Checkbox, Input, Row, Col, Card, Form, Button, Modal, Upload, Icon } from 'antd';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
const FormItem = Form.Item;
const CheckboxGroup = Checkbox.Group;
const { TextArea } = Input;
const formItemLayout = {
  labelCol: {
    sm: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};

@connect(({ Desensitization, loading }) => ({
  Desensitization,
  loading: loading.models.Desensitization,
}))
@Form.create()
class Desense extends PureComponent {
  state = {
    fileList: [],
    uploading: false,
  };

  doUpload = () => {
    const {dispatch, groupId} = this.props;
    const {fileList} = this.state;
    if (fileList && fileList.length > 5) {
      Modal.warning({title: "一次最多上传5个文件"});
      return;
    }

    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('file', file);
    });
    formData.append('dirId', 0);
    if (groupId) {
      formData.append('groupId', groupId);
    }
    this.setState({
      uploading: true,
    });
    dispatch({
      type: 'Desensitization/queryList',
      payload: formData,
      callback: (res) => {
        if (res.result == "ok") {
          this.setState({
            // fileList: [],
            uploading: false,
          });
          Modal.success({title: res.msg});
        } else {
          this.setState({
            uploading: false,
          });
          Modal.error({title: '操作失败', content: res.msg});
        }
      },
    });
  }

  willLook = e => {
    e.preventDefault();
    console.log(123)
  }

  renderSimpleForm() {
    const { form: {getFieldDecorator} } = this.props;
    return (
      <Card bordered={false}>
      <Form>
        <Row gutter={16}>

          <Col md={24}>
          <FormItem {...formItemLayout} label="敏感字段">
            {getFieldDecorator('jurisdiction')(
              <CheckboxGroup>
                <Checkbox key="phone" value={0}>手机号</Checkbox>
                <Checkbox key="cade"  value={1}>身份证号</Checkbox>
                <Checkbox key="area" value={2}>地址</Checkbox>
                <Checkbox key="mail" value={3}>邮箱</Checkbox>
              </CheckboxGroup>
            )}
          </FormItem>
          </Col>

          <Col md={24}>
          <FormItem  {...formItemLayout}  label="敏感内容">
            {getFieldDecorator('remark')(<TextArea placeholder="关键字以“空格”隔开，例如（习大大 响水爆炸 89事件）" rows={2} />)}
          </FormItem>
          </Col>

          <Col md={24}>
            <FormItem>
              <Button style={{display: 'block',margin: 'auto'}} type="primary" onClick={this.willLook}>开始脱敏</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      </Card>
    );
  }

  render() {
    // const {
    //   watermarkInterface: { data },
    //   loading,
    // } = this.props;
    const { uploading, fileList } = this.state;
    let title = '上传文件';

    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    // hh
    return (
      <PageHeaderWrapper title="文件脱敏">
        <Card bordered={false}>
          <div style={{display:'block'}}>
            <Upload {...props}>
              <Button disabled={uploading}>
                <Icon type="upload"/> 选择文件
              </Button>
            </Upload>
            <Button
              type="primary"
              onClick={this.doUpload}
              disabled={fileList.length === 0}
              loading={uploading}
              style={{marginTop: 16}}
            >
              {uploading ? '上传中' : '开始上传'}
            </Button>
          </div>
          <div>{this.renderSimpleForm()}</div>

          <div>
            <Button type="primary" onClick={this.willLook}>下载</Button>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}
export default Desense;
